<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/* 属性选择器  根据某一个属性选择到标签 标签[属性名='属性值']*/ 
		/* input[type='password']{
			background-color: blue;
		}
		div[class='two']{
			background-color: red;
		} */
		/* 以什么开头 css2 属性名|=属性值  只能选中属性以-连接得属性值 */
		/* input[name|='user']{
			background-color: pink;
		} */
		/* css3以什么开头属性选择器 属性名^=属性值   */
		input[name^='user']{
			background-color: pink;
		}
		/* 以什么结尾 */
		div[class$='second']{
			background-color: pink;
		}
	</style>
</head>
<body>
	用户名:<input type="text" name="username">
	密码:<input type="password" name="user-name">
	<div class="one">第一个div</div>
	<div class="two second">第二个div</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
</body>
</html>